<template>
	<view class="container_sub">
		<view class="game_title">Highly Detailed Audio</view>
		<view class="intro">
			The speaker unit contains a diaphragm that is precision-grown from NAC Audio bio-cellulose, making it stiffer, lighter and stronger than regular PET speaker units, and
			allowing the sound-producing diaphragm to vibrate without the levels of distortion found in other speakers.
		</view>
		<view class="intro">
			The speaker unit contains a diaphragm that is precision-grown from NAC Audio bio-cellulose, making it stiffer, lighter and stronger than regular PET speaker units, and
			allowing the sound-producing diaphragm to vibrate without the levels of distortion found in other speakers.
		</view>
		<view class="card_i">
			<image class="game_img" src="@/static/images/home/game.png" mode=""></image>
			<view class="c_left">
				<view class="c_title">APTX HD WIRELESS AUDIO</view>
				<view class="c_tip">The Aptx® HD codec transmits 24-bit hi-res audio, equal to or better than CD quality.</view>
			</view>
		</view>
		<view class="card_i">
			<image class="game_img" src="@/static/images/home/game.png" mode=""></image>
			<view class="c_left">
				<view class="c_title">APTX HD WIRELESS AUDIO</view>
				<view class="c_tip">The Aptx® HD codec transmits 24-bit hi-res audio, equal to or better than CD quality.</view>
			</view>
		</view>

		<view class="btn">
			<up-button type="primary" color="#0ACF83" :customStyle="btnStyle" text="Add To Cart"></up-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const filterList = [{ name: 'Overview' }, { name: 'Features' }, { name: 'Specification' }];

const btnStyle = {
	height: '88rpx',
	borderRadius: '20rpx',
	fontSize: '32rpx',
	color: '#333',
	fontWeight: 700
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.container_sub {
	letter-spacing: 0.4rpx;
	background-color: #19191f;
	font-size: 32rpx;
	line-height: 48rpx;
	padding-bottom: 44rpx;
	.game_title {
		font-weight: 700;
	}
	.intro {
		margin-top: 24rpx;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	.card_i {
		margin-top: 48rpx;
		display: flex;
		align-items: center;
		.game_img {
			width: 198rpx;
			height: 200rpx;
			display: block;
			margin-right: 28rpx;
		}
		.c_left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.c_title {
				font-weight: 700;
			}
			.c_tip {
				font-size: 28rpx;
				line-height: 44rpx;
			}
		}
	}
	.btn {
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}
}
</style>
